import { Outlet, useNavigate } from "react-router-dom"
import { Tabbar } from 'react-vant'

import { Zi } from "./Router/index"
import './App.css'

function App() {
  const navigate = useNavigate()
  
  const handleTabChange = (val: string | number) => {
    // 根据不同的标签页跳转到不同路径
    if (val === 'one') {
      navigate('/')
    } else {
      navigate(`/app/${val}`)
    }
  }
  
  return (
    <div className="App">
      <main className="main-content">
        <Outlet></Outlet>
      </main>
      <footer className="footer-tabbar">
        <Tabbar onChange={handleTabChange}>
          {
            Zi.map((item) => (
              <Tabbar.Item key={item.path} icon={item.icon} name={item.path}>{item.title}</Tabbar.Item>
            ))
          }

        </Tabbar>

      </footer>
    </div>
  )
}

export default App
